<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="false" %>
<%
	String path = request.getContextPath();
	pageContext.setAttribute("path", path);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home</title>
<!-- ExtJS 样式 -->
<link rel="stylesheet" type="text/css" href="${path}/script/extjs-3.2.1/resources/css/ext-all.css" />
<!-- 先引入底层驱动，一般用ext自己的，如果要使用jquery的，还要先引入jquery库 -->
<script type="text/javascript" src="${path}/script/extjs-3.2.1/adapter/ext/ext-base.js"></script>
<!-- ExtJs all -->
<script type="text/javascript" src="${path}/script/extjs-3.2.1/ext-all.js"></script>
</head>
<body>
<div id="btn"></div>
<script type="text/javascript">
Ext.onReady	(function(){
	// 1.Ext.util.Observable 所有类的事件的根类，实现了事件驱动，包括监听、触发、响应
	// 自定义事件
	var win1 = new Ext.Window({
		title: "自定义事件",
		width: 300,
		height: 200,
	});
	// 添加一个自定义事件
	win1.addEvents(["okgo"]);
	win1.on("okgo", function(){
		alert("okgo");
	});
	win1.show();
	// 触发这个事件
	win1.fireEvent("okgo");

	// 2.Ext.Component 所有组件和控件的父类，继承Ext.util.Observable
	// config options：cls额外的样式，disabled不可用，id设置组件ID，listeners配置监听同外部调用on
	// property：ownerCt父容器，rendered是否渲染
	// method：disable禁用
	// xtype：各个组件的文本标识
	var btn = new Ext.Button({
		text: "我的按钮",
		disabled: false,
		listeners: {
			click: function(b, e){
				alert("点了");
				b.disable();
			}
		}
	});
	btn.render("btn");

	// 3.Ext.BoxComponent 控件的父类，可见的盒式布局的，继承Ext.Component
	// config options：autoHeight自适应高度
	// methods：getBox获得高度等

	// 4.Ext.Container 容器，继承Ext.BoxComponent
	// config options：activeItem其中元素设置成活动状态，defaultType元素默认类型，xtype指代组件，defaults默认子元素配置选项
	// items固定的数组（放入组件对象或组件描述），layout布局排列
	// methods：add，remove容器元素等
	// events：
	var win2 = new Ext.Window({
		title: "容器1",
		width: 500,
		height: 300,
		items: [new Ext.Button({text:"按钮1"}), {xtype:"button",text:"按钮2"}]
	});
	win2.show();
	// 元素默认类型都是按钮
	var win3 = new Ext.Window({
		title: "容器2",
		width: 500,
		height: 300,
		defaultType: "button",
		items: [{text:"按钮1"}, {text:"按钮2"}]
	});
	win3.show();
});
</script>
</body>
</html>
